<template>
  <el-container class="setting-center_mall-info-setting_bunk-info">
    <el-main>
      <el-card shadow="never" class="bunk-info-info-container">
        <div class="bunk-info-container">
          <div class="left-container">
            <el-card shadow="never" class="bunk-info-list-card">
              <el-tree
                ref="tree"
                :data="data"
                :props="defaultProps"
                :highlight-current="true"
                :check-on-click-node="true"
                :expand-on-click-node="false"
                node-key="id"
                :current-node-key="currentNodekey"
                @node-click="handleNodeClick"
              />
            </el-card>
          </div>
          <div class="right-container">
            <el-card shadow="never" class="selectCard searchColumn">
              <el-form label-position="right" label-width="6rem">
                <el-row :gutter="40">
                  <el-col :span="8">
                    <el-form-item label="铺位号：">
                      <el-input v-model="searchParams.storeNo" placeholder="请输入" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="铺位状态：">
                      <el-select v-model="searchParams.storeStatus">
                        <el-option label="全部" value="" />
                        <el-option label="出租" value="2" />
                        <el-option label="空租" value="1" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="所属业态：">
                      <el-cascader
                        v-model="searchParams.versionStat"
                        :options="formatList"
                        :props="props"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <search-button :default-params="searchParams" @refreshParams="refreshParams" @getList="getList1" />
              </el-form>
            </el-card>
            <el-card shadow="never" class="commercia-tenant-list-title tableCard">
              <vxe-toolbar :custom="{icon: 'el-icon-s-operation'}" :refresh="{query: getList}" print>
                <template v-slot:buttons>
                  <el-button type="primary" size="small" icon="el-icon-plus" @click="openModal('')">添加</el-button>
                </template>
              </vxe-toolbar>
              <vxe-table
                ref="xTree"
                border
                stripe
                resizable
                highlight-hover-row
                :loading="loading"
                :auto-resize="true"
                :data="bunkList"
                height="500"
                :print-config="{}"
                header-align="center"
              >
                <vxe-table-column type="seq" width="50" align="center" title=" " />
                <vxe-table-column field="storeNo" min-width="120" title="铺位号" />
                <vxe-table-column field="code" title="铺位编码" min-width="120" />
                <vxe-table-column field="versionStatName" title="所属业态" min-width="160" />
                <vxe-table-column field="storeStatusName" title="铺位状态" min-width="120" />
                <vxe-table-column align="right" title="建筑面积" min-width="120">
                  <template slot-scope="scope">
                    {{ scope.row.buildArea | filterPrice }}
                  </template>
                </vxe-table-column>
                <vxe-table-column align="right" title="套内面积" min-width="120">
                  <template slot-scope="scope">
                    {{ scope.row.useArea | filterPrice }}
                  </template>
                </vxe-table-column>
                <vxe-table-column align="right" title="计租面积" min-width="120">
                  <template slot-scope="scope">
                    {{ scope.row.contractArea | filterPrice }}
                  </template>
                </vxe-table-column>
                <vxe-table-column
                  title="操作"
                  fixed="right"
                  width="100"
                  align="center"
                  slots="default"
                >
                  <template slot-scope="scope">
                    <el-button type="text" size="mini" @click="openModal(scope.row.id)">编辑</el-button>
                    <el-button type="text" size="mini" @click="del(scope.row.id)">删除</el-button>
                  </template>
                </vxe-table-column>
              </vxe-table>
              <vxe-pager
                :current-page.sync="searchParams.pageNum"
                :page-size.sync="searchParams.pageSize"
                :total="total"
                :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
                @page-change="getList"
              />
            </el-card>
          </div>
        </div>
      </el-card>
    </el-main>
    <el-dialog title="铺位信息" :visible.sync="dialogVisible" :close-on-click-modal="false">
      <el-form ref="bunkForm" :rules="rules" :model="params" label-width="7rem">
        <el-row :gutter="40">
          <el-col :span="12">
            <el-form-item label="铺位号：" prop="storeNo">
              <el-input v-model="params.storeNo" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="铺位编码：" prop="code">
              <el-input v-model="params.code" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属业态：" prop="versionStat">
              <el-cascader
                v-model="params.versionStat"
                :options="formatList"
                :props="props"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="铺位状态：">
              <el-select v-model="params.storeStatus">
                <el-option label="空租" :value="1" />
                <el-option label="出租" :value="2" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="建筑面积：" prop="buildArea">
              <el-input v-model="params.buildAreas" class="inputNumRight" @focus="buildAreaF" @blur="buildAreaB" @input="change($event)" />
              <!-- <el-input-number v-model="params.buildArea" class="inputNumRight" :precision="2" :controls="false" /> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="套内面积：" prop="useArea">
              <el-input v-model="params.useAreas" class="inputNumRight" @focus="useAreaF" @blur="useAreaB" @input="change($event)" />
              <!-- <el-input-number v-model="params.useAreas" class="inputNumRight" :precision="2" :controls="false"    /> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计租面积：" prop="contractArea">
              <el-input v-model="params.contractAreas" class="inputNumRight" @focus="contractAreaF" @blur="contractAreaB" @input="change($event)" />
              <!-- <el-input-number v-model="params.contractArea" class="inputNumRight" :precision="2" :controls="false" /> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="租决(元/㎡)：" prop="leaseDecision">
              <el-input v-model="params.leaseDecisions" class="inputNumRight" @focus="leaseF" @blur="leaseB" @input="change($event)" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import { getVersionstatTreeList } from '@/api/tenement'
import { getBunkPageList, getBunk, addBunk, modifyBunk, delBunk } from '@/api/bunk'
import { getBuildPageList } from '@/api/tenement'
import { filterPrice, removeNumber } from '@/utils/filter'
import SearchButton from '@/components/SearchButton'
export default {
  components: {
    SearchButton
  },
  filters: {
    filterPrice
  },
  data() {
    return {
      currentNodekey: '',
      searchParams: {
        storeStatus: '',
        pageNum: 1,
        pageSize: 20
      },
      options: [],
      loading: false,
      bunkList: [],
      formatList: [],
      total: 0,
      props: {
        children: 'children',
        value: 'id',
        label: 'name',
        emitPath: false
      },
      rules: {
        storeNo: [
          { required: true, message: '请填写铺位号', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请填写铺位编码', trigger: 'blur' }
        ],
        versionStat: [
          { required: true, message: '请选择规划业态', trigger: 'blur' }
        ],
        buildArea: [
          { required: true, message: '请填写建筑面积', trigger: 'blur' }
        ],
        useArea: [
          { required: true, message: '请填写套内面积', trigger: 'blur' }
        ],
        contractArea: [
          { required: true, message: '请选择计租面积', trigger: 'blur' }
        ],
        leaseDecision: [
          { required: true, message: '请填写租决(元/㎡)', trigger: 'blur' }
        ]
      },
      title: '爱琴海奥莱',
      params: {},
      dialogVisible: false,
      defaultProps: {
        children: 'floors',
        label: 'name'
      },
      data: [],
      buildId: '',
      floorId: '',
      businessModelList: [],
      businessStatusList: []
    }
  },
  created() {
    this.getBuildingList()
    this.getList()
    this.getTreeInfo()
  },
  methods: {
    refreshParams(params) {
      this.searchParams = params
      this.getList()
    },
    getList1() {
      this.searchParams.pageNum = 1
      this.getList()
    },
    change(e) {
      this.$forceUpdate()
    },
    buildAreaF() {
      this.params.buildAreas = removeNumber(this.params.buildAreas)
      this.$forceUpdate()
    },
    buildAreaB(val) {
      this.params.buildArea = val.currentTarget.value
      this.$set(this.params, 'buildAreas', filterPrice(val.currentTarget.value))
      this.$forceUpdate()
    },
    useAreaF() {
      this.params.useAreas = removeNumber(this.params.useAreas)
      this.$forceUpdate()
    },
    useAreaB(val) {
      this.params.useArea = val.currentTarget.value
      this.$set(this.params, 'useAreas', filterPrice(val.currentTarget.value))
      this.$forceUpdate()
    },
    contractAreaF() {
      this.params.contractAreas = removeNumber(this.params.contractAreas)
      this.$forceUpdate()
    },
    contractAreaB(val) {
      this.params.contractArea = val.currentTarget.value
      this.$set(this.params, 'contractAreas', filterPrice(val.currentTarget.value))
      this.$forceUpdate()
    },
    leaseF() {
      this.params.leaseDecisions = removeNumber(this.params.leaseDecision)
      this.$forceUpdate()
    },
    leaseB(val) {
      this.params.leaseDecision = val.currentTarget.value
      this.$set(this.params, 'leaseDecisions', filterPrice(val.currentTarget.value))
      this.$forceUpdate()
    },
    close() {
      this.dialogVisible = false
    },
    refresh() {
      this.dialogVisible = false
      this.getList()
    },
    openModal(id) {
      this.params = {
        storeStatus: 1
      }
      if (id) {
        this.getInfo(id)
      } else {
        if (this.floorId === '') {
          this.$message.error('请选择楼层')
          return false
        }
      }
      this.dialogVisible = true
      setTimeout(() => {
        this.$refs.bunkForm.clearValidate('storeStatus')
        this.$refs.bunkForm.clearValidate('buildArea')
        this.$refs.bunkForm.clearValidate('useArea')
        this.$refs.bunkForm.clearValidate('contractArea')
      })
    },
    handleNodeClick(data) {
      if (data.floor === undefined) {
        this.floorId = data.id
        this.buildId = ''
      } else {
        this.buildId = data.id
        this.floorId = ''
      }
      this.searchParams.pageNum = 1
      this.getList()
    },
    getTreeInfo() {
      getVersionstatTreeList({
        type: '1',
        parentId: '0'
      }).then(response => {
        this.formatList = response
      })
    },
    getList() {
      getBunkPageList({
        ...this.searchParams,
        buildId: this.buildId,
        floorId: this.floorId
      }).then(response => {
        this.bunkList = JSON.parse(JSON.stringify(response.records))
        this.total = response.total
      })
    },
    del(id) {
      if (this.$demoUser.checkUser()) {
        alert('演示账号，不能执行此操作')
        return
      }
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delBunk(id).then(response => {
          this.$message.success('删除成功')
          this.getList()
        })
      })
    },
    getBuildingList() {
      getBuildPageList().then(response => {
        this.data = [{ floors: [], id: '', name: '全部' }, ...response]
      })
    },
    getInfo(id) {
      getBunk(id).then(response => {
        this.params = response
        this.$set(this.params, 'buildAreas', filterPrice(this.params.buildArea))
        this.$set(this.params, 'useAreas', filterPrice(this.params.useArea))
        this.$set(this.params, 'contractAreas', filterPrice(this.params.contractArea))
        this.$set(this.params, 'leaseDecisions', filterPrice(this.params.leaseDecision))
      })
    },
    submit() {
      if (this.$demoUser.checkUser()) {
        alert('演示账号，不能执行此操作')
        return
      }
      this.$refs.bunkForm.validate(valid => {
        if (valid) {
          if (this.params.id) {
            modifyBunk(this.params).then(response => {
              this.$message.success('修改成功')
              this.dialogVisible = false
              this.getList()
            })
          } else {
            this.params.floorId = this.floorId
            addBunk(this.params).then(response => {
              this.$message.success('添加成功')
              this.dialogVisible = false
              this.getList()
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
.setting-center_mall-info-setting_bunk-info {
  .bunk-info-info-container {
    width: 100%;
  }
  .map-info {
    width: 100%;
    height: 300px;
  }
  .bunk-info-container {
    display: flex;
    .left-container {
      margin-right: 20px;
      .bunk-info-list-card {
        height: 100%;
        // margin-top: 20px;
        width: 150px;
      }
    }
    .right-container {
      width: calc(100% - 170px);
      .commercia-tenant-list-title {
        margin-bottom: 20px;
        .el-card__body {
          padding:  0;
        }
      }
    }
    .logoImg {
      width: 50px;
      height: 50px;
    }
  }
}
</style>
